import React, { useEffect } from 'react'
import logoImg from '../../assets/images/images/Index/logo.png'
import banner from '../../assets/images/images/Index/banner.png'
import bg from '../../assets/images/images/Index/bg.png'
import icon from '../../assets/images/images/Index/icon-1.png'
import img1 from '../../assets/images/images/Index/img-1.png'
import img2 from '../../assets/images/images/Index/img-2.png'
import api from '../../apis/home.js'
import { useNavigate } from 'react-router-dom'
import { useState } from 'react'
const Home = () => {
    const navigate = useNavigate()
    const [typeArr, setTypeArr] = useState([])
    useEffect(() => {
        getType()
        user()
    }, [])
    function getType() {
        // 获取分类
        api.getTypes().then(res => {
            console.log(res.data);
            setTypeArr(res.data.data)
        })
    }
    function user() {
        // 获取学生信息
        api.getStuInfo().then(res => {
            console.log(res.data);
            localStorage.user = JSON.stringify(res.data.data)
        })
    }
    function page(_id) {
        console.log(_id);
        // 页面点击跳转携带_id
        navigate(`/examination/${_id}`)
    }
    function wrongbook() {
        navigate('/wrongbook')
    }
    function collection() {
        navigate('/collection')
    }
    return (
        <div>
            <div className='header'>
                <div className='head'>
                    <div className='header-left'>
                        <img src={logoImg} alt="" style={{ width: '90%' }} />
                    </div>
                    <div className='header-center'>
                        <ul className='ul'>
                            <li className='li lis'>首页</li>
                            <li className='li lis'>考试</li>
                            <li className='li lis' onClick={wrongbook}>错题本</li>
                            <li className='li lis' onClick={collection}>收藏夹</li>
                        </ul>
                    </div>
                    <div className='header-right'>
                        <span>登录</span>
                        <span>|</span>
                        <span>注册</span>
                    </div>
                </div>
            </div>
            <div style={{ width: '100%', height: '360px', position: 'relative', display: 'flex', justifyContent: 'center' }}>
                <img src={banner} alt="" style={{ width: '100vw', height: '360px' }} />
                <div style={{ width: '800px', height: '140px', position: 'absolute', top: '280px', display: 'flex', justifyContent: 'space-between' }}>
                    {
                        typeArr.map(item => {
                            return <div style={{ width: '140px', height: '140px', background: '#fff', borderRadius: '10px', boxShadow: '0px 0px 10px 0px rgba(174, 174, 174, 0.44)' }} key={item._id} onClick={() => page(item._id)}>
                                <div style={{ width: '100%', height: '100px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                                    <img src={item.icon} alt="" style={{ width: '80px', height: '80px' }} />
                                </div>
                                <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '40px', color: '#666' }}><span>{item.type}</span></div>
                            </div>
                        })
                    }

                </div>
            </div>
            <div style={{ width: '100%', height: '360px', background: '#fff', display: 'flex', justifyContent: 'center' }}>
                <div className='main-one'>
                    <div style={{ width: '100%', height: '60px', display: 'flex', justifyContent: 'center', position: 'relative' }}>
                        <p style={{ lineHeight: '60px' }} className='examination'>EXAMINATION</p>
                        <span style={{ position: 'absolute', top: '17px', fontSize: '25px' }}>严肃考试</span>
                    </div>
                    <div className='main-center'>
                        <div className='left-main'>
                            <img src={img1} alt="" style={{ width: '300px', height: '100%' }} />
                        </div>
                        <div className='left-main'>
                            <ul style={{ color: '#726fff', }} type='circle'>
                                <li style={{ color: '#666', fontSize: '12px', margin: '18px 0px' }}>适用于高校考试、认证考试、招聘考试等严格防作弊场景 </li>
                                <li style={{ color: '#666', fontSize: '12px', margin: '18px 0px' }}> 学员考前调试设备，本地备份答案及云端同步，断电断网续考</li>
                                <li style={{ color: '#666', fontSize: '12px', margin: '18px 0px' }}>人脸识别与权威数据库比对，AI监考中心三路音视频实时监考</li>
                                <li style={{ color: '#666', fontSize: '12px', margin: '18px 0px' }}>支持匿名判卷及分题分学员判卷，避免判卷过程的舞弊行为</li>
                            </ul>
                            <div style={{ width: '149px', height: '49px', marginLeft: '251px', background: '#726fff', display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }}>探索更多</div>
                        </div>

                    </div>
                </div>
            </div>
            <div style={{ width: '100%', height: '360px', background: '#fff', position: 'relative', display: 'flex', justifyContent: 'center' }}>
                <img src={bg} alt="" style={{ width: '100vw', height: '360px' }} />
                <div className='main-two'>
                    <div style={{ width: '100%', height: '60px', display: 'flex', justifyContent: 'center', position: 'relative' }}>
                        <p style={{ lineHeight: '60px' }} className='examination'>DATA STATISTICS
                        </p>
                        <span style={{ position: 'absolute', top: '17px', fontSize: '25px' }}>数据统计</span>
                    </div>
                    <div style={{ width: '100%', height: '180px', display: 'flex', justifyContent: 'space-between' }}>
                        <div style={{ width: '170px', height: '180px', background: '#fff' }}>
                            <div style={{ width: '100px', height: '100px', background: '#726fff', margin: 'auto auto', marginTop: '10px', border: '10px solid #d1d0ff', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff', fontSize: '23px' }}>186 <span style={{ fontSize: '16px' }}>题</span></div>
                            <p style={{ textAlign: 'center', lineHeight: '60px' }}>练习题数</p>
                        </div>
                        <div style={{ width: '170px', height: '180px', background: '#fff' }}>
                            <div style={{ width: '100px', height: '100px', background: '#eb66ab', margin: 'auto auto', marginTop: '10px', border: '10px solid #f8cde3', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff', fontSize: '23px' }}>5<span style={{ fontSize: '16px' }}>天</span></div>
                            <p style={{ textAlign: 'center', lineHeight: '60px' }}>学习天数</p>
                        </div>
                        <div style={{ width: '170px', height: '180px', background: '#fff' }}>
                            <div style={{ width: '100px', height: '100px', background: '#ab66eb', margin: 'auto auto', marginTop: '10px', border: '10px solid #e3cdf8', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff', fontSize: '23px' }}>66 <span style={{ fontSize: '16px' }}>分</span></div>
                            <p style={{ textAlign: 'center', lineHeight: '60px' }}>最近考试</p>
                        </div>
                        <div style={{ width: '170px', height: '180px', background: '#fff' }}>
                            <div style={{ width: '100px', height: '100px', background: '#e366eb', margin: 'auto auto', marginTop: '10px', border: '10px solid #f6cdf8', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff', fontSize: '23px' }}>74 <span style={{ fontSize: '16px' }}>分</span></div>
                            <p style={{ textAlign: 'center', lineHeight: '60px' }}>平均分数</p>
                        </div>
                    </div>
                </div>
            </div>
            <div style={{ width: '100%', height: '550px', background: '#fff', display: 'flex', justifyContent: 'center' }}>
                <div className='main-one'>
                    <div style={{ width: '100%', height: '60px', display: 'flex', justifyContent: 'center', position: 'relative' }}>
                        <p style={{ lineHeight: '60px' }} className='examination'>ANNOUNCEMENT</p>
                        <span style={{ position: 'absolute', top: '17px', fontSize: '25px' }}>考试公告</span>
                    </div>
                    <div style={{ width: '100%', height: '350px', display: 'flex' }}>
                        <div style={{ width: '50%', height: '100%' }}>
                            <img src={img2} alt="" style={{ width: '100%', height: '100%' }} />
                        </div>
                        <div style={{ width: '50%', height: '100%' }}>
                            <div style={{ width: '370px', height: '50px', marginLeft: '30px', display: 'flex', alignItems: 'center' }}>
                                <button style={{ width: '80px', height: '30px', background: '#726fff', border: '0', borderRadius: '30px', color: '#fff', marginRight: '10px' }}>全部</button>
                                <button style={{ width: '80px', height: '30px', background: '#fff', border: '0', borderRadius: '30px', color: '#726fff', border: '1px solid #726fff', marginRight: '10px' }}>最近</button>
                                <button style={{ width: '80px', height: '30px', background: '#fff', border: '0', borderRadius: '30px', color: '#726fff', border: '1px solid #726fff', marginRight: '10px' }}>一个月前</button>
                            </div>
                            <div style={{ width: '370px', height: '100px', marginLeft: '30px', borderBottom: '1px solid #bdbdbd' }}>
                                <span style={{ marginTop: '10px', display: "inline-block" }}>2022年安徽公务员考试公告</span>
                                <p style={{ color: '#666', fontSize: '12px', marginTop: '10px' }}>关于推迟安徽省2022年度考试录用公务员和选调生笔试工作的公告 为认真贯
                                    彻落实安徽省新冠肺炎疫情防控部署要求,切实做好疫情防控工作,保障广大...</p>
                            </div>
                            <div style={{ width: '370px', height: '100px', marginLeft: '30px', borderBottom: '#bdbdbd 1px solid' }}>
                                <span style={{ marginTop: '10px', display: "inline-block" }}>关于2022年我省高职单招考试推迟举行的公告</span>
                                <p style={{ color: '#666', fontSize: '12px', marginTop: '10px' }}>关于关于2022年我省高职单招考试推迟举行的公告 鉴于当前我省新冠肺炎疫情防
                                    控形势，为保障广大考生身体健康和生命安全，经研究，原定于4月9日...</p>
                            </div>
                            <div style={{ width: '370px', height: '100px', marginLeft: '30px' }}>
                                <span style={{ marginTop: '10px', display: "inline-block" }}>教师资格证考试公告_中小学教师资格证考试资讯</span>
                                <p style={{ color: '#666', fontSize: '12px', marginTop: '10px' }}>关于中小学和幼儿园教师资格考试公告栏目提供全国中小学和幼儿园教师资格考
                                    试最新公告,全国教师资格现场确认安排,全国教师资格考试成绩查询,全国教...</p>
                            </div>
                        </div>
                    </div>
                    {/* </div> */}
                </div>
            </div>
            <div style={{ width: '100%', height: '60px', background: '#726fff', display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }}>Copyright © 2021  成都蜗牛创想科技有限公司 </div>
        </div>
    )
}

export default Home